<template>
  <el-upload
    class="upload"
    action="/bff/imagepic/object/putObject"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :file-list="fileList"
    list-type="picture"
    accept="image/*"
    :headers="headers"
    drag
    multiple
  >
    <div class="el-upload__text">
      拖拽到这里 或者 <em>点击上传</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        只能上传图片
      </div>
    </template>
  </el-upload>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Upload',
  emits: ['success', 'error'],
  props: {
    headers: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handlePreview(file) {

    },
    handleRemove(file, fileList) {

    },
    handleSuccess(response, file, fileList) {
      // console.log('response', response)
      this.$emit('success', response)
    },
    handleError(err, file, fileList) {
      console.error('error', err);
      this.$emit('error', err);
    }
  }
})
</script>

<style lang="scss">
.upload {
  .el-upload.el-upload--picture {
    width: 100%;
  }
  .el-upload-dragger {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>